function initGiNiChart(){
  var myChart = echarts.init(document.getElementById('chart1'));
  option = {
      title: {
          text: '                     黄河中下游城市群基尼系数',
          textStyle: {
              left: '28%',
              color: '#FCFCFC',
              fontSize: 18,
          },
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              lineStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(0, 255, 233,0)'
                      }, {
                          offset: 0.5,
                          color: 'rgba(255, 255, 255,1)',
                      }, {
                          offset: 1,
                          color: 'rgba(0, 255, 233,0)'
                      }],
                      global: false
                  }
              },
          },
      },
      xAxis: [{
          type: 'category',
          name:"年份",
          nameTextStyle:{
            color:"#FCFCFC"
          },
          axisLine: {
              show: true,
              color:'#A582EA'
          },  
          axisLabel: {
              color: '#A582EA',
              width:80
          },
          boundaryGap: false,
          data: ["2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"]
      }],

      yAxis: [{
          type: 'value',
          name:"基尼系数",
          nameTextStyle:{
            color:'#FCFCFC'
          },
          min: 0,
          splitNumber: 4,
          splitLine: {
              show: true,
              lineStyle: {
                  color: '#00BFF3',
                  opacity:0.23
              }
          },
          axisLine: {
              show: true,
          },
          axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                 color: '#fff',
              },
          },
          axisTick: {
              show: false,
          },
      }],
      series: [
          {
              name:'中原城市群',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                  normal: {
                      color: "#A582EA",
                  },
              },
              label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#A582EA',
                  }
              },
              itemStyle: {
                  color: "#fff",
                  borderColor: "#A582EA",
                  borderWidth: 2,
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                              offset: 0,
                              color: 'rgba(43,193,145,0.3)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(43,193,145,0)'
                          }
                      ], false),
                  }
              },
              data: [0.279,0.279,0.274,0.281,0.282,0.279,0.401,0.268,0.264,0.248,0.258,0.257]//data.values
          },
          {
              name:'山东半岛城市群',
              type: 'line',
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                  normal: {
                      color: "#2CABE3",
                  },
              },
              label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#2CABE3',
                  }
              },
              itemStyle: {
                  color: "#fff",
                  borderColor: "#2CABE3",
                  borderWidth: 2,
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                              offset: 0,
                              color: 'rgba(81,150,164,0.3)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(81,150,164,0)'
                          }
                      ], false),
                  }
              },
              data: [0.265,0.259,0.255,0.253,0.250,0.239,0.233,0.233,0.233,0.232,0.234,0.235]//data.values
          },
      ]
  };
  myChart.setOption(option);
}

function initTaiErRateChart(){
  var myChart = echarts.init(document.getElementById('chart4'));
 let option = {
  //  backgroundColor: '#0e2147',
    title: {
        text: '城市群间发展不平衡度',
        left: '28%',
        top: '8%',
        textStyle: {
            color: '#FCFCFC',
            fontSize: 18
        }
    },
    legend: {
        show: true,
        icon: 'circle',
        top: '10%',
        left: "70%",
        itemWidth: 6,
        itemHeight: 6,
        itemGap: 25,
        formatter: '{name}',
        textStyle: {
            color: '#836FFF', 
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        type: 'category',
        name: '年份',
        nameTextStyle:{
          color:"#FCFCFC"
        },
        data: ["2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#c56790'
            },
            margin: 15
        },
        boundaryGap: false
    }],
    yAxis: [{
        type: 'value',
        name: '指数值',
        nameTextStyle:{
          color:"#FCFCFC"
        },
        min:0,
        max:0.1,
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#c56790'
            }
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        name: '泰尔指数',
        type: 'line',
        data: [0.0632,0.0602,0.0634,0.0586,0.0531,0.0542,0.054,0.0547,0.0544,0.0524,0.0496,0.0477],
        symbolSize: 6,
        symbol: 'circle',
        smooth: true,
        lineStyle: {
            color: '#9E87FF'
        },
        itemStyle: {
            normal: {
                color: '#9E87FF',
                borderColor: '#9E87FF'
            }
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#9E87FFb3'
                    },
                    {
                        offset: 1,
                        color: '#9E87FF03'
                    }
                ])
        },
        emphasis: {
            itemStyle: {
                color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                                offset: 0,
                                color: '#9E87FF'
                            },
                            {
                                offset: 0.4,
                                color: '#9E87FF'
                            },
                            {
                                offset: 0.5,
                                color: '#fff'
                            }, {
                                offset: 0.7,
                                color: '#fff'
                            }, {
                                offset: 0.8,
                                color: '#fff'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }
                        ]
                    },
                    borderColor: '#9E87FF',
                    borderWidth: 2
            }
        }
    }
    ]
};
myChart.setOption(option);
}

function initMain(){
  var myChart = echarts.init(document.getElementById('chart3'));
  let option = {
    color: ["#59e7eb", "#38e27f", "#2f92ed", "#d0cc6f", "#e47f2e"],
    title: {
      text: '2007-2018年各城市群经济发展水平描述性统计',
      textStyle: {
          align: 'center',
          color: '#fff',
          fontSize: 16,
      },
      top: '2%',
      left: 'center',
   },
    tooltip: {

    },
    grid: {
        top: "18%",
         left: "0.01%",
         right: "2%",
         bottom: "0.1%",
        containLabel: true
    },
    xAxis: [{
            type: "category",
            boundaryGap: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#676C7B"
                }
            },
            axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                    color: "#d1e6eb",
                    margin: 15
                }
            },
            axisTick: {
                show: false
            },
            data: ['最大值','最小值','平均值','标准差','变异系数']
        },
        {
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: []
        }
    ],
    yAxis: [{
        type: "value",
        nameTextStyle: {
            color: "#fff"
        },
        name: "描述指标",
        max: 10,
        min: 0,
        interval: 50,
        splitNumber: 7,
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed",
                color: "#676C7B"
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#676C7B"
            }
        },
        axisLabel: {
            margin: 20,
            textStyle: {
                color: "#d1e6eb"
            }
        },
        axisTick: {
            show: false
        }
    }],
    series: 
    [
        {
            name: "山东城市群", // bar图的外边框
            type: "bar",
            barWidth: "10%",
            xAxisIndex: 0,
            itemStyle: {
                normal: {
                    color: "rgba(0,0,0,0)",
                    borderColor: "#4292A7",
                    barBorderRadius: 2,
                    borderWidth: 1,
                    shadowColor: "#5CEFF1",
                    shadowBlur: 5,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                }
            },
            data: [10, 10, 10, 10,1]
        },
        {
            name: "山东城市群", //这个是Bar图
            type: "bar",
            barWidth: "4%",
            barGap: "220%",
            xAxisIndex: 1,
            label: {
                show: true,
                formatter: "{a|}",
                color: "#fff",
                position: "top",
                distance: -10,
                backgroundColor: "#60FFFF",
                padding: 4,
                borderRadius: 15,
                rich: {
                    a: {
                        width: 6,
                        height: 6,
                        borderRadius: 6,
                        lineHeight: 6,
                        backgroundColor: "#fff"
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: "#54FCFC" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#1F4869" // 100% 处的颜色
                            }
                        ]
                    }
                }
            },
            data: [10, 0.05,4.01,2.51, 0.62]
        },
        {
            name: "中原城市群", // bar图的外边框
            type: "bar",
            barWidth: "10%",
            xAxisIndex: 0,
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: "rgba(0,0,0,0)",
                    borderColor: "#3AED82",
                    barBorderRadius: 2,
                    borderWidth: 1,
                    shadowColor: "#3AED82",
                    shadowBlur: 5,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                }
            },
            data: [10, 10, 10, 10,1]
        },
        {
            name: "中原城市群", //这个是Bar图
            type: "bar",
            barWidth: "4%",
            xAxisIndex: 1,
            label: {
                show: true,
                formatter: "{a|}",
                color: "#fff",
                position: "top",
                distance: -5,
                backgroundColor: "#3AED82",
                padding: 4,
                borderRadius: 15,
                rich: {
                    a: {
                        width: 6,
                        height: 6,
                        borderRadius: 6,
                        lineHeight: 6,
                        backgroundColor: "#fff"
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: "#3AED82" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#17454E" // 100% 处的颜色
                            }
                        ]
                    }
                }
            },
            data: [10, 0, 2.4, 1.93,0.81]
        },
       
    ]
};
myChart.setOption(option);
}

function trendAnalyst(){
  
var myChart = echarts.init(document.getElementById('chart2'));
//数据
var charts = {
    unit: '得分',
    names: ['中原城市群','山东半岛城市群' ],
    lineX: ["2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
    value: [
        [2.833 ,2.361 ,2.562 ,1.877 ,1.629 ,2.028 ,1.940 ,1.421 ,2.174 ,2.489 ,2.880 ,5.774],
        [4.223 ,4.110 ,4.172 ,4.472 ,4.367 ,3.871 ,3.774 ,4.142 ,4.444 ,4.498 ,4.600 ,6.161],

    ]
    

}
var color = ['rgba(23, 255, 243', 'rgba(255,100,97']
var lineY = []

for (var i = 0; i < charts.names.length; i++) {
    var x = i
    if (x > color.length - 1) {
        x = color.length - 1
    }
    var data = {
        name: charts.names[i],
        type: 'line',
        color: color[x] + ')',
        smooth: true,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: color[x] + ', 0.3)'
                }, {
                    offset: 0.8,
                    color: color[x] + ', 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        symbol: 'circle',
        symbolSize: 5,
        data: charts.value[i]
    }
    lineY.push(data)
}

lineY[0].markLine = {
    silent: true,
    data: [{
        yAxis: 5
    }, {
        yAxis: 100
    }, {
        yAxis: 200
    }, {
        yAxis: 300
    }, {
        yAxis: 400
    }]
}
var option = {
    backgroundColor:'#ffffff0a',
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: charts.names,
        textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)'
        },
        right: '4%',
        top:'45'
    },
    title: {
        text: '2007-2018年城市群间经济发展演变趋势',
        x: 'center',
        y: 'top',
        textAlign: 'left',
        textStyle:{
            fontSize:18,
            color:"#ffffff",
        }
        
    },
    grid: {
        top: '14%',
        left: '4%',
        right: '4%',
        bottom: '12%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: charts.lineX,
        axisLabel: {
            textStyle: {
                color: 'rgb(0,253,255,0.6)'
            },
            formatter: function(params) {
              return params;
                // return params.split(' ')[0] + '\n' + params.split(' ')[1]
            }
        }
    },
    yAxis: {
        name: charts.unit,
        type: 'value',
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: 'rgb(0,253,255,0.6)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgb(23,255,243,0.3)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgb(0,253,255,0.6)'
            }
        }
    },
    series: lineY
}
setInterval(() => {
    myChart.setOption({
      legend: {
        selected: {
          '山东半岛城市群': false,
          '中原城市群': false
        }
      }
    })
    myChart.setOption({
      legend: {
        selected: {
          '山东半岛城市群': true,
          '中原城市群': true
        }
      }
      
    })
},10000)
myChart.setOption(option);

}

function initAllBody(){
  initGiNiChart();
  initMain();
  initTaiErRateChart();
  trendAnalyst();
}